<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    width: 700px;
    height: 400px;
    background-color: skyblue;
    margin: 100px auto;
  }

  .box p {
    font-size: 22px;
    font-weight: 700;
    margin-left: 50px;
    padding-top: 20px;
  }

  h3 {
    margin-left: 30px;
    font-size: 30px;
  }

  h4 {
    margin-left: 30px;
    font-size: 26px;
  }

  h5 {
    margin-left: 30px;
    font-size: 22px;
  }

  .diyi {
    color: red;
  }

  .dier {
    color: blue;
  }

  .disan {
    color: pink;
  }
</style>

<body>
  <div class="box">
    <p>仙界功法随机抽奖</p>
    <h3>一等奖：<span class="diyi">111</span></h4>
      <h4>二等奖：<span class="dier">222</span></h4>
      <h5>三等奖：<span class="disan">333</span></h5>
  </div>
  <script>
    const people = ['方源', '陈伶', '林七夜', '叶凡', '江烟浔', '克莱恩', '杨间', '叶辰']
    const diyi = document.querySelector('.diyi')
    const dier = document.querySelector('.dier')
    const disan = document.querySelector('.disan')
    let a = Math.floor(Math.random() * people.length)
    let one = people[a]
    people.splice(a, 1)
    let b = Math.floor(Math.random() * people.length)
    let two = people[b]
    people.splice(b, 1)
    let c = Math.floor(Math.random() * people.length)
    let three = people[c]
    people.splice(c, 1)
    diyi.innerHTML = `${one}`
    dier.innerHTML = `${two}`
    disan.innerHTML = `${three}`
  </script>
</body>

</html>